<template>
  <div class="left_page">
    <div class="table_element">
     <el-menu
      :default-active="default_active"
      :router=true
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-menu-item index="/home/page">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">首页</span>
        </template> 
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>钱包</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/">钱包管理</el-menu-item>
          <el-menu-item index="/home/order">订单管理</el-menu-item>
          <el-menu-item index="/home/address">转账管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/home/user">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">用户管理</span>
        </template> 
      </el-menu-item>
    </el-menu>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
  },
})
export default class Left extends Vue {
    theme1:any = 'light';
    private data () {
      return {
        default_active: this.$route.path
      }
    }
    private handleOpen () {
      console.log("handle OPen")
    }
    private handleClose () {
      console.log("handle close")
    }
}
</script>
<style scoped lang="scss">
    .left_page{
        position:fixed;
        width:200px;
        height:100%;
        top:80px;
        border-right: 1px solid #ccc;
        .table_element{

        }
        .el-menu{
          border-right:0px solid 
        }
    }
</style>
